<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { ElCard, ElInput, ElButton, ElPagination, ElForm, ElFormItem, ElUpload } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  location: string
  type: string[]
  resource: string
  desc: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

interface Family {
  id: number
  name: string
  description: string
  coverImage?: string
}

// 响应式数据
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(9) // <CHANGE> 默认每页9条，适合3x3布局

// 模拟家族数据
const families = ref<Family[]>([
  { id: 1, name: '李氏家族', description: '传承千年的书香门第，以文治家，诗书传世' },
  { id: 2, name: '王氏家族', description: '武将世家，忠勇传家，保家卫国' },
  { id: 3, name: '张氏家族', description: '商贾世家，诚信经营，富甲一方' },
  { id: 4, name: '刘氏家族', description: '文人墨客，琴棋书画，雅致风流' },
  { id: 5, name: '陈氏家族', description: '医者仁心，悬壶济世，德行天下' },
  { id: 6, name: '赵氏家族', description: '耕读传家，勤俭持家，世代书香' },
  { id: 7, name: '孙氏家族', description: '工匠世家，精益求精，技艺传承' },
  { id: 8, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 9, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 10, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 11, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 12, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 13, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 14, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 15, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 16, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 17, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 18, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 19, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 20, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 21, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 22, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 23, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 24, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 25, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 26, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 27, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 28, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
  { id: 29, name: '周氏家族', description: '学者世家，博学多才，教书育人' },
])

const drawer = ref<boolean>(false)

// 计算属性
const filteredFamilies = computed(() => {
  if (!searchQuery.value) return families.value
  return families.value.filter(family => 
    family.name.includes(searchQuery.value) || 
    family.description.includes(searchQuery.value)
  )
})


const paginatedFamilies = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredFamilies.value.slice(start, end)
})

// 方法
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
}

const createSubFamily = (familyId: number) => {
  console.log('创建子家族:', familyId)
  drawer.value = true
}
</script>

<template>
  <div class="family-list-container">
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-card class="search-card">
        <div class="search-wrapper">
          <span class="search-label">搜索：</span>
          <el-input
            v-model="searchQuery"
            placeholder="请输入家族名称"
            class="search-input"
            clearable
          />
        </div>
      </el-card>
    </div>

    <!-- <CHANGE> 修改为3列网格布局，添加底部边距避免与黄色边栏重叠 -->
    <div class="family-grid">
      <el-card 
        v-for="family in paginatedFamilies" 
        :key="family.id"
        class="family-card"
        shadow="hover"
      >
        <div class="family-content">
          <!-- 家族封面 -->
          <div class="family-cover">
            <span class="cover-text">家族封面</span>
          </div>
          
          <!-- 家族信息 -->
          <div class="family-info">
            <h3 class="family-title">家族名称</h3>
            <div class="family-divider"></div>
            <p class="family-description">{{ family.description }}</p>
            
            <el-button 
              type="warning" 
              class="create-btn"
              @click="createSubFamily(family.id)"
            >
              创建子家族
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- <CHANGE> 添加底部间距，确保分页组件不被黄色边栏遮挡 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[6, 9, 12, 15]"
        :total="filteredFamilies.length"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!-- 点击打开弹窗 -->
  <el-drawer v-model="drawer" title="创建家族" :with-header="false" class="bg-[#ebdfca]" size="50%">
  <el-form  label-width="auto" style="max-width: 600px">
    <el-form-item label="家族名称" prop="name">
      <el-input  placeholder="请输入家族名称" />
    </el-form-item>
    <el-form-item label="家族描述" prop="description">
      <el-input  placeholder="请输入家族描述" />
    </el-form-item>
    <div>家族封面</div>
    <el-upload
      class="avatar-uploader"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        创建家族
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
  </el-drawer>
</template>


<style lang="scss" scoped>
.family-list-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f1eb 0%, #ede4d3 100%);
  padding: 24px;
  font-family: 'SimSun', serif;
  padding-bottom: 200px;
}

.search-section {
  margin-bottom: 24px;
  
  .search-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d4af37;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
  }
  
  .search-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .search-label {
    font-size: 16px;
    color: #8b4513;
    font-weight: 500;
    white-space: nowrap;
  }
  
  .search-input {
    flex: 1;
    max-width: 300px;
    
    :deep(.el-input__wrapper) {
      border: 1px solid #d4af37;
      border-radius: 8px;
      background: #fefefe;
      
      &:hover, &.is-focus {
        border-color: #b8860b;
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
      }
    }
  }
}

// <CHANGE> 修改为3列网格布局
.family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
  
  // 响应式设计
  @media (max-width: 1200px) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.family-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #d4af37;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.25);
    border-color: #b8860b;
  }
  
  :deep(.el-card__body) {
    padding: 0;
  }
}

.family-content {
  display: flex;
  height: 200px; // <CHANGE> 固定卡片高度，保持一致性
}

.family-cover {
  width: 120px;
  background: linear-gradient(135deg, #f0e6d2 0%, #e8dcc6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #d4af37;
  
  .cover-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 16px;
    color: #8b4513;
    font-weight: 500;
    letter-spacing: 2px;
  }
}

.family-info {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.family-title {
  font-size: 18px;
  color: #8b4513;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.family-divider {
  height: 1px;
  background: linear-gradient(to right, #d4af37, transparent);
  margin-bottom: 12px;
}

.family-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 16px 0;
  flex: 1;
}

.create-btn {
  align-self: flex-end;
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(135deg, #b8860b 0%, #9a7209 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
  }
}

// <CHANGE> 优化分页组件样式和位置
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  border: 1px solid #d4af37;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
}

.pagination {
  :deep(.el-pagination__total),
  :deep(.el-pagination__sizes),
  :deep(.el-pagination__jump) {
    color: #8b4513;
  }
  
  :deep(.el-pager li) {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #d4af37;
    color: #8b4513;
    
    &:hover {
      background: #d4af37;
      color: white;
    }
    
    &.is-active {
      background: #d4af37;
      color: white;
      border-color: #d4af37;
    }
  }
  
  :deep(.btn-prev),
  :deep(.btn-next) {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #d4af37;
    color: #8b4513;
    
    &:hover {
      background: #d4af37;
      color: white;
    }
  }
}
</style>